<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="utf-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<html>
<head>
    <title>课程列表</title>
</head>
<body>
<!-- page heading start-->
<div class="page-heading">

    <ul class="breadcrumb text-info">
        <li>
            <a href="/"> 主页 </a>
        </li>
        <li>
            <a href="/course/list"> 课程管理 </a>
        </li>
        <li class="active"> 课程列表 </li>
    </ul>
</div>
<!-- page heading end-->

<!--body wrapper start-->
<div class="wrapper">
    <div class="row">
        <div class="col-sm-12">
            <section class="panel">
                <div class="panel-heading">
                    Course Table
                </div>
                <div class="panel-body">
                    <div class="adv-table editable-table ">
                        <div class="clearfix">
                            <div class="btn-group col-md-3" style="margin-bottom: 10px">
                                <button id="editable-sample_new" class="btn btn-primary" onclick="window.location.href='/course/save'">
                                    新增 <i class="fa fa-plus"></i>
                                </button>
                                <button id="selectAll" class="btn btn-primary" onclick="setSelectAll()" id="selAll">
                                    全选 <i class="fa fa-plus-circle"></i>
                                </button>
                                <button id="selectReverse" class="btn btn-primary" onclick="setSelectReverse()">
                                    反选 <i class="fa fa-plus-square-o"></i>
                                </button>
                                <button id="delete" class="btn btn-primary" onclick="deleteCourses()" >
                                    删除 <i class="fa fa-plus-square-o"></i>
                                </button>
                            </div>
                            <form action="/course/conditionPage" method="get" onsubmit="">
                                <div class="btn-group pull-right col-md-9">
                                    <div class="col-md-1 text-right">
                                        <label class="text-info" for="tcId" style="margin-top: 7px">查询:</label>
                                    </div>
                                    <div class="col-md-2">
                                        <select id="status" class="form-control" name="courseStatus">
                                            <option id="defaultStatus" value="" disabled selected style="display: none">发布状态</option>
                                            <option value="Normal">已发布</option>
                                            <option value="Draft">未发布</option>
                                        </select>
                                    </div>
                                    <div class="col-md-2">
                                        <select  class="form-control" name="courseTeacher">
                                            <option value="" disabled selected style="display: none">任课教师</option>
                                            <c:forEach items="${teacherList}" var="teacher">
                                                <option value="${teacher.id}">${teacher.name}</option>
                                            </c:forEach>
                                        </select>
                                    </div>
                                    <div class="col-md-2">
                                        <select  class="form-control" name="courseSubject">
                                            <option value="" disabled selected style="display: none">一级科目</option>
                                            <c:forEach items="${subjectList}" var="subject">
                                                <option value="${subject.id}">${subject.title}</option>
                                            </c:forEach>
                                        </select>
                                    </div>
                                    <div class="col-md-3">
                                        <input id="tcId"  name="courseTitle" type="search" placeholder="课程标题" class="form-control">
                                    </div>
                                    <div class="col-md-1">
                                        <button type="submit" class="btn btn-info">搜索</button>
                                    </div>
                                    <div class="col-md-1">
                                        <button type="button" class="btn" onclick="window.location.href='/course/list'">返回</button>
                                    </div>
                                </div>
                            </form>
                        </div>

                        <div class="space15"></div>
<%--                        Table 表格--%>
                        <table class="table table-striped table-hover table-bordered" id="editable-sample">
<%--                            表头--%>
                            <thead>
                            <tr>
                                <th> option </th>
                                <th> 发布状态 </th>
                                <th> 课程标题 </th>
                                <th> 课程分类 </th>
                                <th> 课程教师 </th>
                                <th> 价格 </th>
                                <th> 浏览数 </th>
                                <th> Edit </th>
                                <th> Delete </th>
                            </tr>
                            </thead>
                            <tbody>
<%--                            JSTL c标签遍历request中的list--%>
                            <c:forEach items="${page.records}" var="course">
                                <tr class="">
                                    <td><input type="checkbox" class="checkbox" name="checkAll" value="${course.id}"></td>
                                    <td>${course.status == "Normal" ? "已发布" : "未发布"}</td>
                                    <td>${course.title}</td>

                                    <c:forEach items="${requestScope.subjectList}" var="subject">
                                        <c:if test="${subject.id == course.subjectId}">
                                            <td>${subject.title}</td>
                                        </c:if>
                                    </c:forEach>

                                    <c:forEach items="${requestScope.teacherList}" var="teacher">
                                        <c:if test="${teacher.id == course.teacherId}">
                                            <td>${teacher.name}</td>
                                        </c:if>
                                    </c:forEach>
                                    <td>${course.price}</td>
                                    <td>${course.viewCount}</td>
                                    <td><a class="edit" href="/course/findById/${course.id}">Edit</a></td>
                                    <td><a class="delete" href="javascript:;">Delete</a></td>
                                </tr>
                            </c:forEach>

                            </tbody>
                        </table>

                        <%--                        page是封装好的对象,total是由后端处理好的总页数--%>
                        <div>
                            <ul class="pagination" style="margin:0px auto; display: block; width: 20%">
                                <li><a href="/course/list/${page.current - 1 > 0 ? page.current - 1 : 1}/${page.size}">«</a></li>
                                <c:forEach begin="1" end="${total}" var="i">
                                    <li class="${page.current == i ? "active" : ""}"><a href="/course/list/${i}/${page.size}">${i}</a></li>
                                </c:forEach>
                                <li><a href="/course/list/${(page.current + 1 < total) ? (page.current + 1) : total}/${page.size}">»</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>
</div>
<!--body wrapper end-->
<script>
    $(document).ready(function(){
    })

<%--    新增按钮--%>
    var checkboxs = document.getElementsByName("checkAll")
    function setSelectAll(){
        for(var i=0; i<checkboxs.length; i++) {
            checkboxs[i].checked=true;
        }

    }
    function setSelectReverse(){
        for (var i=0;i<checkboxs.length;i++) {
            checkboxs[i].checked = !checkboxs[i].checked;
        }
    }
    function deleteCourses(){
        var courseIds = ""
        for(var i = 0; i < checkboxs.length; i++){
            if(checkboxs[i].checked == true)
                courseIds += checkboxs[i].value + ","
        }
        console.log(courseIds)
        $.ajax({
            type: "get",
            url: '/course/deleteBatchIds',
            data: {
                courseIds
            },
            success: function () {
                toastr.success("批量删除成功!")
                setTimeout(function (){
                    window.location.reload()
                },1000)
            },
            error: function () {
                toastr.error("批量删除失败!")
                setTimeout(function (){
                    window.location.reload()
                },1000)
            },
        })
    }
</script>
</body>
</html>
